/* eslint-disable react/no-array-index-key */
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import { Card, Row, Spin, Button, Divider } from 'antd';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Description } = DescriptionList;

@connect(({ quotation, loading }) => ({
  loading: loading.effects['quotation/fetchDetail'],
  detailInfo: quotation.detailInfo,
}))
class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { quoId } = queryString.parse(location.search);
    // 获取调整项的字典值
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: [
        'SER_TYPE',
        'YES_NO_FLAG',
        'PAY_FEES_WAY',
        'BIZ_INS_TYPE',
        'ISNULL_FLAG',
        'PRODUCT_WAGE_TYPE',
      ],
    }).then(dictCode => {
      // 获取详情信息
      dispatch({
        type: 'quotation/fetchDetail',
        payload: { quoId, dictCode },
      });
    });
  }

  // 跳转到报价单修改历史界面
  jumpEditHistory = () => {
    const { location } = this.props;
    const { quoId } = queryString.parse(location.search);
    router.push(`/salemanage/quotation/edithistoryrecord?quoId=${quoId}`);
  };

  render() {
    const { loading, detailInfo } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin tip="loading..." spinning={loading}>
          <Card
            title={<span style={{ fontWeight: 'bolder' }}>报价单详情</span>}
            extra={<a onClick={() => this.jumpEditHistory()}>修改记录</a>}
          >
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="报价单名称">{detailInfo.quoName || '--'}</Description>
              <Description term="签约方">{detailInfo.suppName || '--'}</Description>
              <Description term="合同名称">{detailInfo.contName || '--'}</Description>
              <Description term="客户名称">{detailInfo.custName || '--'}</Description>
              <Description term="服务类型">{detailInfo.serTypeName || '--'}</Description>
              <Description term="状态">{detailInfo.quoStateName || '--'}</Description>
              <Description term="是否含税">{detailInfo.taxFlagName || '--'}</Description>
              {detailInfo.taxFlag === 2 ? (
                <Description term="税率">{`${detailInfo.taxRatio}%`}</Description>
              ) : (
                <div />
              )}
              <Description term="所属客服">{detailInfo.primName || '--'}</Description>
              <Description term="创建人">{detailInfo.creName || '--'}</Description>
              <Description term="创建时间">
                {moment(detailInfo.creTime).format('YYYY-MM-DD HH:mm') || '--'}
              </Description>
            </DescriptionList>
            <Row>
              {detailInfo.packList &&
                detailInfo.packList.map((pack, index) => (
                  <Card key={index} style={{ marginBottom: 24, border: '1px solid #e8e8e8', width: '100%' }}>
                    {pack.listQuoPd &&
                      pack.listQuoPd.map(item => (
                        <DescriptionList key={item.pdId} style={{ marginBottom: 15 }}>
                          <Description term="产品名称">{item.pdName}</Description>
                          {item.listAttr.map(attr => (
                            <Description key={attr.specifAttrId} term={attr.attrName}>
                              {attr.name}
                            </Description>
                          ))}
                        </DescriptionList>
                      ))}
                    {pack.priceList.length ? <Divider /> : null}
                    {pack.priceList &&
                      pack.priceList.map((item, i) => (
                        <DescriptionList key={i} style={{ marginBottom: 15 }}>
                          <Description term="执行地区">{item.areaName || '--'}</Description>
                          <Description term="报价金额">
                            {item.quotePrice === 0 ? 0 : item.quotePrice || '--'}
                          </Description>
                          {item.taxMoney == null ? (
                            <div />
                          ) : (
                            <Description term="税金">{item.taxMoney || '--'}</Description>
                          )}
                        </DescriptionList>
                      ))}
                  </Card>
                ))}
            </Row>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}> 返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Detail;
